<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.real_name" placeholder="客户姓名" style="width: 150px;margin-top:8px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-date-picker v-model="listQuery.date" style="width:150px" format="yyyy-MM-dd" type="datetime" placeholder="开始日期" />
      <el-date-picker v-model="listQuery.date_end" style="width:150px" format="yyyy-MM-dd" type="datetime" placeholder="结束日期" />
      <el-select  v-model="listQuery.sale_id" placeholder="选择市场人员" filterable class="filter-item" style="width:150px;margin-top:8px">
        <el-option label="选择市场人员" value="" />
        <el-option
          v-for="item in sale"
          :key="item.sale_id"
          :label="item.real_name"
          :value="item.sale_id"
        />
      </el-select>
      <company ref="companys"></company>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-top:8px">查询</el-button>
      <!-- <excelout ></excelout> -->
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" size="mini"  border fit highlight-current-row style="width: 100%;">
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          
          <el-button type="primary" size="mini" @click="detail(row.order_id)" v-if="row.order_status==24" >
            制单
          </el-button>
        
          <el-button type="success" size="mini" v-else @click="detail(row.order_id)"  >
            详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <span >{{ row.order_status_name.str }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电子合同" align="center" width="200">
        <template slot-scope="{row}" v-if="row.order_status==40||row.order_status==32||row.order_status==34||row.order_status==35">
            <el-button type="primary" v-if="row.esign_contract.lab==4" size="mini"  @click="applySign(row.order_id)">发起签署</el-button>
            <span :class="textcolor(row.esign_contract.lab)" 
                v-else
                @click="downloadEsignContract(row.order_id,row.esign_contract.lab)">
                <span v-if="row.esign_contract.lab!=4">{{ row.esign_contract.desc}}</span>
                </span>
                <span  style="font-size:6px !important" v-if="row.esign_contract.lab==3">---有疑问?
                  <a style="color:#66cccc !important;font-size:6px !important"  @click="applySign(row.order_id)">重新发起</a>
                </span>
                <span style="color:#66cccc;cursor: pointer;" v-if="row.esign_contract.lab==1" @click="CallingSignatures(row.order_id)">--催签</span>
                <span style="color:#00b38a;cursor: pointer;" v-if="row.esign_contract.lab==1" @click="getSignUrl(row.order_id)">--获取签约链接</span>
        </template>
      </el-table-column>
      <el-table-column label="产品" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.goods_name }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="城市" align="center">
        <template slot-scope="{row}">
          <span>{{ row.city_name }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="手机号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.idcard }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="申请金额(万元)" align="center">
        <template slot-scope="{row}">
          <span>{{ row.apply_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="期数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_period }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进件时间" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="门店" align="center">
        <template slot-scope="{row}">
          <span>{{ row.c_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进件人员" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sale_name }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="车300报告(初版)" align="center">
        <template slot-scope="{row}">
          <span style="color:#67C23A;cursor: pointer;"  @click="che300(row.order_id,1)">查看</span>
        </template>
      </el-table-column>
      <el-table-column label="车300报告(详版)" align="center">
        <template slot-scope="{row}" >
          <span style="color:#67C23A;cursor: pointer;"  @click="che300(row.order_id,2)" v-if="row.order_status>21">查看</span>
          <span  v-else >待完善信息</span>
        </template>
      </el-table-column>
      <el-table-column label="大数据报告" align="center">
        <template slot-scope="{row}" v-if="row.idcard!=''">
          <span style="color:#67C23A;cursor: pointer;"  @click="bigdataDownLoad(row.order_id)" v-if="row.idcard!=''">查看</span>
          <span  v-else>待完善信息</span>
        </template>
    
      </el-table-column>
      <el-table-column label="影像" align="center">
        <template slot-scope="{row}">
          <span style="color:#67C23A;cursor: pointer;"  @click="getImagesData(row.order_id)">查看</span>
        </template>
      </el-table-column>
      <el-table-column label="客户信息" align="center">
        <template slot-scope="{row}">
          <span style="color:#67C23A;cursor: pointer;"  @click="getCustomerInfo(row.order_id)">查看</span>
        </template>
      </el-table-column>
      <el-table-column label="日志" align="center">
        <template slot-scope="{row}">
          <span style="color:#67C23A;cursor: pointer;"  @click="getOrderRecord(row.order_id)">查看</span>
        </template>
      </el-table-column> 
      <el-table-column label="合同套打" align="center">
        <template slot-scope="{row}">
          <span style="color:#67C23A;cursor: pointer;"  @click="contractPrint(row.order_id)">下载</span>
        </template>
      </el-table-column>-->
      
      
     
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    
    <el-dialog title="日志" :visible.sync="orderRecordAble" style="width:800px;margin:auto">
        <div class="block">
          <el-timeline :reverse="true">
            <el-timeline-item
              v-for="(item, index) in orderRecord"
              :key="index"
              :timestamp="item.create_time">
              {{item.name}}--{{item.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="customerInfoAble = false">
            取消
          </el-button>
        </div>
    </el-dialog>
    <el-dialog :title="orderInfo.order_status==10?'预审':orderInfo.order_status==23?'中核':orderInfo.order_status==24?'审核':'终审'" :visible.sync="ReviseAble" style="margin:auto">
      <el-form ref="dataForm" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="审核结果"  prop="order_status">
          <el-radio-group v-if="orderInfo.order_status==10"  v-model="form.order_status">
            <el-radio label="11">通过</el-radio>
            <el-radio label="100">退改</el-radio>
            <el-radio label="1000">拒绝</el-radio>
          </el-radio-group>
          <!-- <el-radio-group  v-if="orderInfo.order_status==22" v-model="form.order_status">
            <el-radio label="31">通过</el-radio>
            <el-radio label="100">拒绝</el-radio>
          </el-radio-group> -->
          <el-radio-group  v-if="orderInfo.order_status==23" v-model="form.order_status">
            <el-radio label="31">通过</el-radio>
            <el-radio label="200">退改</el-radio>
            <el-radio label="1000">拒绝</el-radio>
          </el-radio-group>
          <el-radio-group  v-if="orderInfo.order_status==24" v-model="form.order_status">
            <el-radio label="40">通过</el-radio>
            <el-radio label="400">拒绝</el-radio>
          </el-radio-group>
          <el-radio-group  v-if="orderInfo.order_status==34" v-model="form.order_status">
            <el-radio label="35">通过</el-radio>
            <el-radio label="300">退改</el-radio>
            <el-radio label="1000">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item v-if="orderInfo.order_status==10" label="通过成数"  prop="total_percentage">
          <el-input v-model="form.total_percentage" type="number" />
        </el-form-item>
        <!-- <el-form-item v-if="orderInfo.order_status==23" label="费率" prop="rate" >
          <el-input v-model="form.rate" type="number" value="0.0115"/>
        </el-form-item> -->
        <el-form-item v-if="orderInfo.order_status==23" label="期数" prop="total_period">
           <el-input v-model="form.total_period" type="number" />
        </el-form-item>
        
        <el-form-item label="备注">
          <el-input v-model="form.content" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="returnOrderSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  downloadPdf
} from '@/api/order'
import {
  fetchAllList,getche300Data,getImagesData,getOrderRecord,submitCheckStatus,bigdataDownLoad,downloadDocx,downloadEsignContract,applySign,CallingSignatures,getSignUrl
} from '@/api/order'
import {
  getCustomerInfo 
} from '@/api/customer'
import { formatDate } from '@/utils/formatDate.js'
import waves from '@/directive/waves' // waves directive
import {
  getNodes
} from '@/utils'
import company from '@/components/company/company.vue' 
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination,company
  },
  directives: {
    waves
  },
  filters: {
   	formatDate(time) {
   	        time = time * 1000
   	        const date = new Date(time)

   	        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
   	      }
  },
  data() {
    return {
      viewerOptions:true,
      che300DetailAble:false,
      order_idd:'',
      imageAble:false,
      contractPrintAble:false,
      che300able:false,
      orderRecordAble:false,
      ReviseAble:false,
      customerInfoAble:false,
      orderInfo:[],
      nodes: [],
      form:{
        rate:0.0115,
        order_status:'',
        total_money:'',
        total_period:'',
        total_percentage:''
      },
      che300DataDetail:[],
      tableKey: 0,
      tableRecord: 1,
      list: null,
      recordTotal: 0,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        step:'make',
        real_name: '',
        start:'',
        end:'',
        c_id: '',
        is_settle:''
      },
      rules: {
        order_status: [{
          required: true,
          message: '审核结果必须选择',
          trigger: 'blur'
        }],
        total_money: [{
           required: true,
           message: '金额必填',
           trigger: 'blur'
        }],
        total_percentage: [{
           required: true,
           message: '成数必填',
           trigger: 'blur'
        }],
        rate: [{
           required: true,
           message: '费率必填',
           trigger: 'blur'
        }],
        total_period: [{
           required: true,
           message: '期数必选',
           trigger: 'blur'
        }],
      },
      sale: [],
      che300Data:[],
      che300DataFirstPrice:[],
      imagesData:[],
      orderRecord:[],
      customer_info:[]
    }
  },
  created() {
     this.cacheQueryFormat();
    this.nodes = getNodes();
    this.is_system = localStorage.getItem('is_system')
    setInterval(() => {
      this.getList();
    },120000)
    this.getList();
    //添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mdestroyed() {
    //添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {
      //刷新页面事件
      sessionStorage.removeItem('ordermakecontract');
    },
    cacheQueryFormat(){
      let cacheQuery = sessionStorage.getItem('ordermakecontract');
      if(cacheQuery){
        this.listQuery = JSON.parse(cacheQuery);
      }
    },
    getSignUrl(order_id){
      this.listLoading = true
      let pam = {order_id : order_id};
      getSignUrl(pam).then(response => {
        this.listLoading = false
          if(response.code==200){
            this.$alert(response.data.url, '签约链接', {
              confirmButtonText: '确定'
            });
          }else{
            this.$notify({
              title: 'error',
              message: response.msg,
              type: 'error',
              duration: 2000,
              // onClose: this.getOrderDetail(),
              onClose: this.listLoading = false
            })
          }
      })
    },
    textcolor(lab){
          if(lab==0){
            return 'pray';
            return '#909399'
          }
          if(lab==3){
             return 'green';
            return '#67C23A'
          }
          if(lab==2){
             return 'red';
            return '#E6A23C'
          }
          if(lab==1){
             return 'yellow';
            return '#F56C6C'
          }
      },
    downloadEsignContract(order_id) {
      let pam = {order_id : order_id};
      downloadEsignContract(pam).then(response => {
        this.listLoading = false
     
        if(response.code==200){
          //window.location.href = response.data.first;
          window.open(response.data.url,'top');
        }
       
      })
    },
    applySign(order_id) {
      this.$confirm(
          '确定要向客户发起电子合同签署吗?',
          '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
        ).then(() => {
            this.listLoading = true
            let pam = {order_id : order_id};
            applySign(pam).then(response => {
              this.listLoading = false
                if(response.code==200){
                  this.$notify({
                    title: 'success',
                    message: 'success',
                    type: 'success',
                    duration: 2000,
                    onClose: this.getList()
                  })
                }else{
                  this.$notify({
                    title: 'error',
                    message: response.msg,
                    type: 'error',
                    duration: 2000,
                    // onClose: this.getOrderDetail(),
                    onClose: this.listLoading = false
                  })
                }
            })
      })
    },
    CallingSignatures(order_id) {
      this.$confirm(
          '确定向客户发起催签吗?',
          '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
        ).then(() => {
            this.listLoading = true
            let pam = {order_id : order_id};
            CallingSignatures(pam).then(response => {
              this.listLoading = false
                if(response.code==200){
                  this.$notify({
                    title: 'success',
                    message: 'success',
                    type: 'success',
                    duration: 2000,
                    onClose: this.getList()
                  })
                }else{
                  this.$notify({
                    title: 'error',
                    message: response.msg,
                    type: 'error',
                    duration: 2000,
                    // onClose: this.getOrderDetail(),
                    onClose: this.listLoading = false
                  })
                }
            })
      })
    },
    che300(order_id,code){
      this.che300DataFirstPrice=[];
      let pam = {order_id:order_id,code:code};
      getche300Data(pam).then(response => {
        if(response.code==200){
          if(code==1){
            this.che300able = true;
            this.che300Data = response.data
            this.che300DataFirstPrice = response.data.eval_result.eval_price
          }else{
            this.che300DetailAble = true;
            this.che300DataDetail = response.data
          }
        }else{
          this.$notify({
            title: '失败提示',
            message: response.msg,
            type: 'error',
            duration: 2000,
            // onClose: this.getOrderDetail(),
            onClose: this.listLoading = false
          })
        }
         
         
      })
    },
    downloadDocx(code){
      let pam = {order_id:this.order_idd,code:code};
      downloadDocx(pam).then(response => {
         
      })
    },
    detail(order_id) {
      this.$router.push('/order/detail/' + order_id)
    },
    contractPrint(order_id){
      this.contractPrintAble = true;
      this.order_idd = order_id;
    },
    bigdataDownLoad(order_id){
      this.listLoading = true
      let pam = {order_id:order_id};
      bigdataDownLoad(pam).then(response => {
        if(response.code==200){
            window.open(response.data.url,'top');
            this.listLoading = false
        }else{
          this.$notify({
            title: '失败提示',
            message: 'PDF生成失败',
            type: 'error',
            duration: 2000,
            // onClose: this.getOrderDetail(),
            onClose: this.listLoading = false
          })
        }
      })
    },
    getCustomerInfo(order_id){
      this.customerInfoAble = true;
      let pam = {order_id:order_id};
      getCustomerInfo(pam).then(response => {
          this.customer_info = response.data
      })
    },
    getOrderRecord(order_id){
      this.orderRecordAble = true;
      let pam = {order_id:order_id};
      getOrderRecord(pam).then(response => {
          this.orderRecord = response.data
      })
    },
    doRevise(row){
      this.orderInfo = row;
      this.form.order_id = row.order_id
      this.form.total_money = row.apply_money
      this.form.total_period = row.total_period
      this.form.total_percentage = row.total_percentage
      this.ReviseAble = true
    },
    getImagesData(order_id){
      this.imageAble = true;
      let pam = {order_id:order_id};
      getImagesData(pam).then(response => {
          this.imagesData = response.data
      })
    },
    returnOrderSubmit(order_id){
      if(this.form.order_status==''){
        this.$message.error('请完善信息');
          return;
      }
      if(this.form.order_status==11&&this.form.total_percentage==''){
        this.$message.error('请完善信息');
        return;
      }
  
      submitCheckStatus(this.form).then(response => {
        if (response.code == 200) {
          this.listRecordLoading = false
          this.$notify({
            title: 'Success',
            message: '操作成功',
            type: 'success',
            duration: 2000,
            // onClose: this.getOrderDetail(),
            onClose: this.getList()
          })
        } 
        this.ReviseAble = false;
      })
    },
    getList() {
      sessionStorage.setItem('ordermakecontract',JSON.stringify(this.listQuery))
      this.listLoading = true;
      this.listQuery.limit = 10;
      fetchAllList(this.listQuery).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.sale = response.data.sale_merchant.sale
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.2 * 1000)
      })
    },
    handleFilter() {
      let c_id = this.$refs.companys.$data.listQuery.c_id;
      this.listQuery.c_id = c_id
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
<style>
.pray{color:#909399}
  .green{color:#67C23A;cursor: pointer;}
  .yellow{color:#E6A23C}
  .red{color:#F56C6C}
.contractbox{
  height: 40px;
  color: #00b38a;
  line-height: 50px;
  cursor: pointer;
}
.ima_title{
  font-size: 15px;
  height: 30px;
}
.box {
    margin-left: 50px;
    margin-right: 50px;
  }
  .l_title {
    font-size: 14px;
    font-weight: 700;
    margin-top:20px
  }
  .infolist_top {
    margin-top: 10px;
    
  }
  .infolist {
    color: #333;
    font-size: 13px;
    margin-left: 10px;
    height: 20px;
    border-bottom: 1px solid #eee;
  }

  .infolist_file {
    color: #1890FF;
    font-size: 15px;
    margin-left: 10px;
  }
  .img_box {
    width: 150px;
    height: 150px;
    margin-left: 16px;
    float: left;
    position: relative;
    margin-bottom: 40px;
  }
  .hovers {
    position: absolute;
    top: 155px;
    width: 100%;
    background: #fff;
    color: #333;
    text-align: center;
  }
  .che300table td{
    border-collapse: collapse;
    height: 40px;
  }
  .che300table tr{
    border-bottom: 1px solid #ccc;
  }
  .che300table {
    border-collapse: collapse;
    width: 80%;
    margin-left: 10%;
  }
  .td_title{
    width: 40%;
    text-align: left;
  }
  .td_value{
    text-align: left;
  }
</style>
